<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绿地中央广场综合物业办公系统 - 基本表单</title>
<meta name="keywords" content="绿地中央广场综合物业办公系统">
<meta name="description" content="绿地中央广场综合物业办公系统">
<link rel="shortcut icon" href="favicon.ico">
<link href="${ctx}/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${ctx}/css/animate.min.css" rel="stylesheet">
<link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">

<!-- 引入文件上传组件 webuploader 的样式 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">


<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/jquery.form.js"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/content.min.js?v=1.0.0"></script>
<script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${ctx}/js/plugins/layer2.4/layer.js"></script>

<!-- 引入 文件上传组件 webuploader 的js -->
<script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>

<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>

<!-- 引入日历插件js文件 -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>

<style type="text/css">
.check-error {
	color: red
}
</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">

		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h3 class="m-t-none m-b" style="text-align:center;">审核</h3>
					</div>
					<br />
					<div class="col-sm-6 b-r">
						<form class="form-horizontal" action="" method="post" id="taskForm">
							<div class="form-group" id="unameForm">
								<label class="col-sm-3 control-label">标题：</label>
								<div class="col-sm-7">
									<input readonly="readonly" id="title" type="text" name="title" class="form-control"
										placeholder="请输入标题" value="">
									<span class="help-block m-b-none" id="titleMsg"></span>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">创建时间： </label>
								<div class="col-sm-7">
									<input id="creattime" readonly="readonly" name="creattime" placeholder="请输入创建时间"
										class="form-control layer-date laydate-icon">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">截止时间：</label>
								<div class="col-sm-7">
									<input readonly="readonly" id="fintime" name="fintime" placeholder="请输入截止时间"
										class="form-control layer-date laydate-icon">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">执行人员：</label>
								<div class="col-sm-7">
									<select disabled="disabled" name="person" id="person" class="form-control m-b">
										<option value="-1">请选择执行人员</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">紧急程度：</label>
								<div class="col-sm-7">
									<input disabled="disabled" type="radio" name="urgent" value="1">
									普通
									<input disabled="disabled" type="radio" name="urgent" value="2">
									紧急
									<input disabled="disabled" type="radio" name="urgent" value="3">
									非常紧急
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-7">
									<textarea readonly="readonly" rows="5" cols="30" id="content" name="content"
										class="form-control" placeholder="请输入任务内容"></textarea>

								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">附件</label>
								<div class="col-sm-7">

									<div id="uploader" class="wu-example">
										<div id="thelist1" class="uploader-list"></div>
										<div class="btns" id="idcard_id1">
											<!-- <div id="picker1">选择附件</div> -->
											<!--<button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button> -->
										</div>
									</div>
									<input type="hidden" id=annex name="annex" />
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8"></div>
							</div>
						</form>
					</div>

					<div class="col-sm-6">
						<form class="form-horizontal" action="" method="post" id="transForm">
							<!-- 隐藏域:带上id... -->
							<input type="hidden" name="id">
							<input type="hidden" id="replytime" name="replytime" class="form-control">
							<input type="hidden" id="taskid" name="taskid" class="form-control">
							<div class="form-group">
								<label class="col-sm-3 control-label">标题：</label>
								<div class="col-sm-7">
									<input readonly="readonly" id="title" type="text" name="title" class="form-control"
										placeholder="请输入标题" value="">
									<span class="help-block m-b-none" id="titleMsg"></span>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">申请时间： </label>
								<div class="col-sm-7">
									<input readonly="readonly" id="applytime" name="applytime"
										class="form-control layer-date laydate-icon">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人：</label>
								<div class="col-sm-7">
									<select disabled="disabled" name="delayclerk" id="delayclerk" class="form-control m-b">
										<option value="-1">申请人</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">申请原因：</label>
								<div class="col-sm-7">
									<input readonly="readonly" id="transreason" name="transreason" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-7">
									<textarea rows="5" cols="30" name="content" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">转交对象：</label>
								<div class="col-sm-7">
									<select name="acceptor" id="acceptor" class="form-control m-b">
										<option value="-1">审核人</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期时间： </label>
								<div class="col-sm-7">
									<input id="transfintime" name="transfintime" class="form-control layer-date laydate-icon">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">申请批复：</label>
								<div class="col-sm-7">
									<input type="radio" name="delaystatus" value="1">
									批准
									<input type="radio" name="delaystatus" value="2">
									否决
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">审核人：</label>
								<div class="col-sm-7">
									<select name="replyman" id="replyman" class="form-control m-b">
										<option value="-1">审核人</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">详细意见：</label>
								<div class="col-sm-7">
									<textarea rows="5" cols="30" id="transoption" name="transoption" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn btn-sm btn-primary" id="update_btn" type="submit">审批提交</button>
									<button class="btn btn-white" type="button" onclick="closeWindows()">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			getPerson();
			temp = window.location.href.split("?")[1];
			id = temp.split("=")[1];
			readtrans(id);
	
			$.validator.addMethod("checkPerson", function(value, element, param) {
				var pattern = /^\+?[1-9][0-9]*$/;
				return pattern.test(value);
			});
	
	
			$("#transForm").validate({
				ignore : [], //检查所有表单
				errorPlacement : function(error, element) {
					if (element.is(":checkbox") || element.is(":radio")) {
						error.appendTo(element.parent());
					} else {
						error.insertAfter(element);
					}
				},
	
				rules : {
					delaystatus : "required",
					replyman : {
						required : true,
						checkPerson : true
					},
					transoption : "required",
					acceptor : {
						required : true,
						checkPerson : true
					},
					transfintime : "required"
				},
				messages : {
					delaystatus : "请选择是否批准",
					replyman : {
						required : "审核人不能为空",
						checkPerson : "请选择审核人"
					},
					transoption : "请输入详细意见",
					acceptor : {
						required : "转交人不能为空",
						checkPerson : "请选择转交人"
					},
					transfintime : "请选择延期时间"
				},
	
				submitHandler : function() {
					var transFormDate = $("#transForm").serialize();
					$.post("${ctx}/taskChangePage.sxt?cmd=updateTask", transFormDate, function(data) {
						if (data.code == 1) {
							layer.alert(data.msg, {
								skin : 'layui-layer-molv' //样式类名
							}, function(index) {
								layer.close(index);
	
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							});
						} else {
							layer.alert(data.msg, {
								skin : 'layui-layer-molv' //样式类名
							});
						}
					});
				}
			});
	
		});
	
	
		//上传附件
		jQuery(function() {
			var $ = jQuery,
				$list = $('#thelist1'), // thelist节点中添加文本  身份证正面  div添加  
				$btn = $('#ctlBtn1'), // 文件上传按钮   身份证正面 文件上传按钮
				state = 'pending',
				uploader;
	
			//初始化
			uploader = WebUploader.create({
				// 不压缩image
				resize : false,
	
				// 文件接收服务端。
				server : "${ctx}/fileUpload.gzsxt",
	
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				//开始上传 按钮的id 
				pick : '#picker1',
	
				// 只允许选择图片文件。
				accept : {
					title : 'Images',
					extensions : 'jpg,jpeg,bmp,png',
					mimeTypes : 'image/*'
				},
	
				//允许上传的文件个数
				fileNumLimit : 1,
				//单个文件最大的上传限制 1M
				fileSingleSizeLimit : 1024 * 1024 // 1M
			});
	
			// 当有文件添加进来的时候
			uploader.on('fileQueued', function(file) {
	
				uploader.makeThumb(file, function(error, ret) {
					if (error) {
	
						$list.append('<div id="' + file.id + '" class="item"><p class="state">预览错误</p></div>');
	
					} else {
						$list.append("<img  id='img" + file.id + "' src='" + ret + "' style='width: 100;height: 100' />");
					}
				}, 100, 100);
	
				$list.append("<button id='del" + file.id + "' type='button' class='btn btn-default'>取消此附件</button>");
	
				$("#del" + file.id).on('click', function() {
					uploader.removeFile(file, true);
					$("#img" + file.id).remove();
					$("#" + file.id).remove();
					$("#del" + file.id).remove();
				});
	
				$list.append('<div id="' + file.id + '" class="item">' +
					'<h4 class="info">' + file.name + '</h4>' +
					'<p class="state">等待上传...</p>' +
					'</div>');
			});
	
			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function(file, percentage) {
				var $li = $('#' + file.id),
					$percent = $li.find('.progress .progress-bar');
	
				// 避免重复创建
				if (!$percent.length) {
					$percent = $('<div class="progress progress-striped active">' +
						'<div class="progress-bar" role="progressbar" style="width: 0%">' +
						'</div>' +
						'</div>').appendTo($li).find('.progress-bar');
				}
	
				$li.find('p.state').text('上传中');
	
				$percent.css('width', percentage * 100 + '%');
			});
	
			//文件上传成功后  触发的事件  触发一个回调函数
			uploader.on('uploadSuccess', function(file, response) {
	
				// 上传的图片保存的相对位置
				var idcard_url = response.msg;
	
				//将url 添加到  form表单的隐藏域中
				$("#accessory").val(idcard_url);
	
				$('#' + file.id).find('p.state').text('已上传');
	
			});
	
			uploader.on('uploadError', function(file) {
				//TODO
				$('#' + file.id).find('p.state').text('上传出错');
				uploader.reset();
			});
	
			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').fadeOut();
			});
	
			uploader.on('all', function(type) {
				if (type === 'startUpload') {
					state = 'uploading';
				} else if (type === 'stopUpload') {
					state = 'paused';
				} else if (type === 'uploadFinished') {
					state = 'done';
				}
	
				if (state === 'uploading') {
					$btn.text('暂停上传');
				} else {
					$btn.text('开始上传');
				}
			});
	
			//出错以后回调的函数
			uploader.on("error", function(type) {
				alert(type);
				if (type == "F_EXCEED_SIZE") {
					layer.alert('最大只能上传1M文件', {
						skin : 'layui-layer-molv' //样式类名
					});
				}
			});
	
			$btn.on('click', function() {
				if (state === 'uploading') {
					uploader.stop();
				} else {
					uploader.upload();
				}
			});
	
		});
	
		function getPerson() {
			$.get("${ctx}/taskAdd.sxt", {
				cmd : "checkId_Name"
			}, function(data) {
				//拼接<option>标签
				var options = "<option value='-1'>请选择</option>";
				$.each(data, function(index, user) {
					options += "<option value=" + user.id + ">" + user.uname + "</option>";
				});
				//将拼接的options数据设置到省的下拉框中
				$("#acceptor").html(options);
				$("#replyman").html(options);
				$("#delayclerk").html(options);
				$("#person").html(options);
			}, "json");
		}
		function closeWindows() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
	
		function readtask(id) {
			$.get("${ctx}/taskCheck.sxt", {
				cmd : 'checkById',
				id : id
			}, function(data) {
	
				var taskForm = $("#taskForm")[0];
				if (typeof (data[0].id) != "undefined" && data[0].id != "") {
					taskForm.id.value = data[0].id;
				}
				if (typeof (data[0].title) != "undefined" && data[0].title != "") {
					taskForm.title.value = data[0].title;
				}
				if (typeof (data[0].person) != "undefined" && data[0].person != "") {
					taskForm.person.value = data[0].person;
				}
				if (typeof (data[0].urgent) != "undefined" && data[0].urgent != "") {
					var radios = $("input[type=radio][name='urgent']");
					for (i = 0; i < radios.length; i++) {
						if (radios[i].value == data[0].urgent) {
							radios[i].checked = true;
						}
					}
				}
				if (typeof (data[0].content) != "undefined" && data[0].content != "") {
					taskForm.content.value = data[0].content;
				}
				if (typeof (data[0].creattime) != "undefined" && data[0].creattime != "") {
					taskForm.creattime.value = new Date(data[0].creattime).toLocaleDateString();
				}
				if (typeof (data[0].fintime) != "undefined" && data[0].fintime != "") {
					taskForm.fintime.value = new Date(data[0].fintime).toLocaleDateString();
				}
				if (typeof (data[0].annex) != "undefined" && data[0].annex != "") {
					$("#idcard_id1").html("<br><img  src='${ctx}" + data[0].annex + "' style='width: 150px;height: 150px' />");
				}
				var transForm = $("#transForm")[0];
				console.log();
				
			}
			);
		}
	
	
		function readtrans(id) {
			$.get("${ctx}/taskChangePage.sxt?cmd=checkById", {
				id : id
			}, function(data) {
				var transForm = $("#transForm")[0];
				if (typeof (data[0].id) != "undefined" && data[0].id != "") {
					transForm.id.value = data[0].id;
				}
				transForm.replytime.value = new Date().toLocaleDateString();
				if (typeof (data[0].taskid) != "undefined" && data[0].taskid != "") {
					transForm.taskid.value = data[0].taskid;
				}
				if (typeof (data[0].title) != "undefined" && data[0].title != "") {
					transForm.title.value = data[0].title;
				}
				if (typeof (data[0].applytime) != "undefined" && data[0].applytime != "") {
					transForm.applytime.value = new Date(data[0].applytime).toLocaleDateString();
				}
				if (typeof (data[0].delayclerk) != "undefined" && data[0].delayclerk != "") {
					transForm.delayclerk.value = data[0].delayclerk;
				}
				if (typeof (data[0].transreason) != "undefined" && data[0].transreason != "") {
					transForm.transreason.value = data[0].transreason;
				}
				if (typeof (data[0].content) != "undefined" && data[0].content != "") {
					transForm.content.value = data[0].content;
				}
				if (typeof (data[0].delaystatus) != "undefined" && data[0].delaystatus != "") {
					var radios = $("input[type=radio][name='delaystatus']");
					for (i = 0; i < radios.length; i++) {
						if (radios[i].value == data[0].delaystatus) {
							radios[i].checked = true;
						}
					}
				}
				if (typeof (data[0].replyman) != "undefined" && data[0].replyman != "") {
					transForm.replyman.value = data[0].replyman;
				}
				if (typeof (data[0].transoption) != "undefined" && data[0].transoption != "") {
					transForm.transoption.value = data[0].transoption;
				}
				if (typeof (data[0].acceptor) != "undefined" && data[0].acceptor != "") {
					transForm.acceptor.value = data[0].acceptor;
				}
				if (typeof (data[0].transfintime) != "undefined" && data[0].transfintime != "") {
					transForm.transfintime.value = new Date(data[0].transfintime).toLocaleDateString();
				}
				readtask(data[0].taskid);
			}
			);
		}
	</script>
</body>
</html>
